<template>
  <div>
    <!-- 顶部组件 -->
    <header-nav></header-nav>

    <div class="rank">
      <div class="item" v-for="item in playList" :key="item.id">
        <router-link tag="div" :to="'/rank/ranklist?id=' + item.id" class="img">
          <van-image lazy-load :src="item.coverImgUrl" alt="" />
        </router-link>
        <ul>
          <li
            v-for="(key, index) in item.tracks"
            :key="key.id"
            v-show="index < 3"
          >
            {{ index + 1 }}.{{ key.name }}--{{ key.ar[0].name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getToplist, getPlaylistDetail } from "../api/rank";
import headerNav from "../components/base/headerNav.vue";
export default {
  data() {
    return {
      playList: [],
    };
  },

  components: {
    headerNav,
  },

  // 路由中组件前路由守卫 提前请求数据
  beforeRouteEnter(to, from, next) {
    console.log("beforeRouterEnter钩子");
    // 请求第一个接口数据
    getToplist().then((data) => {
      // next() 保证请求数据执行完成后
      next((vm) => vm.getPlaylistDetailFun(data.list));
    });
  },
  methods: {
    // 请求第二个接口
    getPlaylistDetailFun(list) {
      for (let i = 0; i < list.length; i++) {
        let id = list[i].id;
        // console.log(id);
        //  第二个接口
        getPlaylistDetail({ id: id }).then((data) => {
          this.playList.push(data.playlist);
        });
      }
    },

    // getPlaylistDetailFun(list){
    //   for(let i = 0; i<list.length; i++){

    //   }
    // },

    // getToplistFun(){
    //   getToplist().then((data)=>{
    //     console.log(data);
    //     // 请求网络速度过慢 页面已经渲染完成
    //     // 实例化vue=>实例化vuerouter=>组件执行生命周期钩子
    //     for(let i = 0; i<10; i++){
    //       let id = data.list[i].id;
    //       getPlaylistDetail({id:id}).then((data)=>{
    //           console.log(data);
    //           this.playList.push(data.playlist)
    //       })
    //     }
    //     console.log(this.playList);
    //   })
    // }
  },

  created() {
    // this.getToplistFun()
  },
};
</script>

<style lang="less">
.rank {
  margin-top: 5px;
  .item {
    margin: 0px 8px;
    padding: 2px 0px;
    border-bottom: 1px solid #e1e2e2;
    height: 90px;
    display: flex;
    .img {
      flex: 0 0 90px;
      margin-right: 18px;
      background-color: chocolate;
      width: 90px;
      height: 90px;
      border-radius: 2px;
      img {
        width: 90px;
        height: 90px;
      }
    }
    ul {
      flex: 1;
      height: 90px;
      margin-top: 4px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;

      li {
        width: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 27px;
        line-height: 27px;
        font-size: 12px;
        color: 1b1b28;
         
      }
    }
  }
}
</style>